
<template>
  <!-- 表格直接绑定分页后的列表 -->
  <el-table :data="pagedList" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column label="Operations">
      <template #default="{ row }">
        <el-button size="small" type="danger" @click="remove(row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :total="tableData.length"
      layout="prev, pager, next, ->, total"
      style="margin-top: 12px; text-align: right"
  />
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

interface User { date: string; name: string; address: string }

// 数据
const tableData = reactive<User[]>([
  { date: '2016-05-03', name: '张三', address: 'LA' },
  { date: '2016-05-02', name: '李四', address: 'LA' },
  { date: '2016-05-04', name: '王五', address: 'LA' },
  { date: '2016-05-01', name: 'Tom', address: 'LA' },
  { date: '2016-05-01', name: 'Cat', address: 'LA' },
])

// 分页
const page = ref(1)
const size = ref(2)

// 当前页数据
const pagedList = computed(() => {
  const start = (page.value - 1) * size.value
  return tableData.slice(start, start + size.value)
})

// 删除
const remove = (row: User) => {
  const i = tableData.findIndex(r => r.name === row.name)
  if (i > -1) tableData.splice(i, 1)
  // 删完当前页最后一条自动回上一页
  if (pagedList.value.length === 0 && page.value > 1) page.value--
}
</script>